<script lang="ts" setup>

import {ref, onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import router from '@/router'
import { Plus } from '@element-plus/icons-vue'

import{apiUserList,apiUserSave,apiDfsUpload} from "@/api/api"
import{formatTagUserStatus,formatUserStatus,formatUserType} from "@/utils/format"
import {backTo} from '@/utils/jump'
import {validEmail} from "@/utils/validate"

const reqCreateParmas = ref({
})
const userStatus = [
  {
    value: 0,
    label: '正常',
  },
  {
    value: 1,
    label: '锁定',
  },
] 
const userType = [
  {
    value: "admin",
    label: '管理员',
  },
  {
    value: "expert",
    label: '专家',
  },
  {
    value: "common",
    label: '教师',
  },

] 
const newImageUrl = ref()

async function handlerUpdateFile(){
  const file = document.querySelector('input[type=file]').files[0]
  const resp  = await apiDfsUpload(file)
  if (resp.code != 0) {
        console.log(resp)
        ElMessage.error("上传失败， 请联系管理员")
        return 
  }
  newImageUrl.value = "http://192.168.2.8:8899/downloads/"+resp.msg
}

async function handleUserCreate(){

 if (!reqCreateParmas.value.username) {
      ElMessage.error('请输入用户名')
      return
  }
  if (!reqCreateParmas.value.password) {
      ElMessage.error('请输入密码')
      return
  }
  if (!newImageUrl.value){
    reqCreateParmas.value.avatar= newImageUrl.value

  }


  if (!reqCreateParmas.value.email ) {
      ElMessage.error('请输入邮箱')
      return
  }
  if (!validEmail(reqCreateParmas.value.email)) {
    ElMessage.error('请输入有效邮箱')
      return
  }
  if (!reqCreateParmas.value.mobile ) {
      ElMessage.error('请输入用邮箱')
      return
  }  

  if (!reqCreateParmas.value.userType ) {
      ElMessage.error('请选择用户类型')
      return
  }

  const data = await apiUserSave(reqCreateParmas.value)
  if (data.code != 0) {
      console.log(data)
      ElMessage.error(data.msg)
      return 
  }

  ElMessage({
      message: '创建成功！',
      type: 'success',
  })
  backTo()
}



onMounted(() => {
})

</script>

<template>




<el-button  type="primary" @click="backTo" >返回</el-button>
<div class="info_box">

 <el-form :model="reqCreateParmas" label-position="right"      label-width="100px">
  <el-form-item label="用户名">
      <el-input placeholder="用户名"  v-model="reqCreateParmas.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" placeholder="请输入新密码" show-password v-model="reqCreateParmas.password" />
    </el-form-item>
        <el-form-item label="头像">
        <el-upload
      ref="uploadRef"
      :multiple:="false"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handlerUpdateFile"
  >
      <!-- <el-input v-model="paramUpdate.username" /> -->
        <img v-if="newImageUrl" :src="newImageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input placeholder="请输入邮箱"  v-model="reqCreateParmas.email" />
    </el-form-item>
    <el-form-item label="手机号">
      <el-input placeholder="请输入手机号"  v-model="reqCreateParmas.mobile" />
    </el-form-item>
    <el-form-item label="用户类型">
      <el-select v-model="reqCreateParmas.userType"  placeholder="用户类型" clearable >
            <el-option
              v-for="item in userType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
        </el-select>
    </el-form-item>
  </el-form>
    <el-button-group class="right_button">
    <el-button type="primary" @click="handleUserCreate">确定</el-button>
    </el-button-group>
</div>


</template>